<template>
	<div class="box">
		<Top></Top>
		<Banner></Banner>
		<chamber></chamber>
		<div class="bos">
			<!-- 版心区域 -->
			<div class="center">
				<!-- 人才库区域 -->
				<div class="top">
					<!-- 人才库文字区域 -->
					<div class="wen">
						<div class="xian">
							<div class="le">
								<img src="../../../assets/6.png" alt="" />
							</div>
							<h3>人才库</h3>
						</div>
					</div>
					<!-- 用户单位文字区域 -->
					<div class="umit">
						<div
							class="xiao"
							v-for="(item, index) in list"
							:key="index"
							@click="person(index)"
						>
							<div class="left">
								<img
									src="../../../assets/icon_column.png"
									alt=""
								/>
							</div>
							<div class="zhong">
								{{ item.text }}
							</div>
						</div>
					</div>
				</div>

				<!-- 底部区域 -->
				<div class="bottom">
					<h3>浏览须知</h3>
					<!-- 内容区域 -->
					<div class="context">
						&nbsp;
						&nbsp;&nbsp;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
  
  <script>
import Top from "@/components/Home/TopPage.vue"
import Banner from "@/components/Home/BannerView.vue"
import chamber from "@/components/Home/CommCe.vue"
export default {
	data() {
		return {
			list: [
				{ "text": "用人单位浏览须知" },
				{ "text": "各省人才库储备" },
				{ "text": "人才储备免费登记" },
			]
		}
	},
	components: {
		Top, Banner, chamber
	},

	methods: {
		person(i) {
			if (i == 0) {
				this.$router.push("/personOne")
			} else if (i == 1) {
				this.$router.push("/personsix")
			} else if (i == 2) {
				this.$router.push("/personmin")
			}
		}
	}
}
  </script>
  
  <style scoped>
/* 整体区域 */
.bos {
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #f0eff5;
}
/* 版心区域 */
.center {
	width: 95%;
	height: 3rem;
	/* background-color: rebeccapurple; */
}
/* 访谈和电视总区域 */
.top {
	width: 100%;
	margin-top: 0.05rem;
	border-radius: 0.1rem;
	background-color: white;
}
.wen {
	width: 100%;
	height: 25%;
	display: flex;
	justify-content: center;
}
.xian {
	width: 98%;
	height: 100%;
	display: flex;
	border-bottom: 2px solid #dad9df;
}
.le {
	width: 40%;
	height: 100%;
	line-height: 0.3rem;
	font-size: 0.18rem;
	padding-left: 0.1rem;
}
.le img {
	height: 0.3rem;
	float: right;
	padding: 0.05rem 0.1rem 0 0;
}
h3 {
	width: 60%;
	height: 100%;
	font-size: 0.24rem;
	line-height: 0.4rem;
}
/* 用人单位区域 */
.umit {
	width: 100%;
	min-height: 0.4rem;
	border-radius: 0.1rem;
	margin-top: 0.1rem;
	background-color: white;
}
.xiao {
	width: 100%;
	margin-top: 0.05rem;
	display: flex;
}
/* 左边区域 */
.xiao .left {
	width: 5%;
	height: 100%;
	margin-left: 0.1rem;
}
.xiao .left img {
	width: 0.17rem;
	height: 0.3rem;
}
/* 中间区域 */
.zhong {
	width: 95%;
	height: 100%;
	line-height: 0.3rem;
	padding-left: 5px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/* 底部区域 */
.bottom {
	width: 100%;
	margin-top: 0.1rem;
}

.bottom h3 {
	width: 100%;
	height: 0.35rem;
	text-align: center;
}
/* 内容区域 */
.context {
	width: 100%;
	font-weight: 700;

	padding-bottom: 0.55rem;
}
</style>